import { Layout, Menu, Popconfirm, Avatar, Image, Space } from 'antd'
import { observer } from 'mobx-react-lite'
import { Link, Outlet, useNavigate } from 'react-router-dom'
import {
  LogoutOutlined,
} from '@ant-design/icons'
import { useStore } from '../../store'
import { useEffect } from 'react'
import '../student/index.scss'
const { Header, Content } = Layout

function getItem (label, key, icon, items, type) {
  return {
    key,
    icon,
    items,
    label,
    type,
  }
}

const Student = () => {
  const navigate = useNavigate()
  const { userInforStore, loginStore } = useStore()
  useEffect(() => {
    userInforStore.getUserInfor()

  }, [userInforStore])

  //退出登录
  const onConfirm = () => {
    loginStore.loginOut()
    navigate('/login')
  }
  //
  const items = [
    getItem(<Link to='/'>首页</Link>, 'menu1'),
    getItem(<Link to='/student'>课程</Link>, 'menu2',),
    getItem(<Link to='/student/studentExam'>考试</Link>, 'menu3',),
    getItem(<Space direction='horizontal'>
      <Avatar
        src={
          <Image
            preview={false}
            src="https://joeschmoe.io/api/v1/random"
            style={{
              width: 32,
            }}
          />
        }
      />
      <span className='userInfor-name'>{userInforStore.userInfor.real_name}</span>
    </Space>, 'menu4'),
    getItem(
      <Popconfirm
        onConfirm={onConfirm}
        title='是否确认退出' okText='退出' cancelText='取消'>
        <LogoutOutlined />退出
      </Popconfirm>
      , 'menu5')
  ]

  return (
    < Layout >
      <Header
        style={{
          position: 'fixed',
          zIndex: 1,
          width: '100%',
        }}
      >
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items}
        >
        </Menu>
      </Header>
      <Content
        className="site-layout"

      >
        <Outlet />

      </Content>

    </Layout >
  )
}
export default observer(Student) 